<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <div  class="box1">
     <ul>
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
    </ul>
   </div>
   
    <script>
        // 读写:(获取/设置):元素内部的结构内容
        // 1.获取
        var box1=document.querySelector('.box1');
        // console.log(box1);

        // 2.innerHTML:读写元素节点里面的内容,从节点的起始位置到终止为止全部内容,包括内部的元素
        console.log(box1.innerHTML);

        // 3.innerText :读写某个元素的节点的文本内容
        console.log(box1.innerText);

        // 4.outerHTML:读写元素节点里面的内容,除了包含innerHtml的全部内容之外,还包含元素节点本身
        console.log(box1.outerHTML);

        // 5.设置
        // box1.innerHTML="<strong>hhhhh</strong>"

        document.querySelectorAll(".box1 ul li")[0].innerHTML="<em>你好</em>"

    </script>
</body>
</html>